﻿@{
    ViewData["Title"] = "ShangWang";
}


@section headpart{
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
    <style>
        #map {
          width: 100%;
          height: 100%;
        }
          .button {
              color: black;
              border: none;
              padding: 15px 32px;*
              text-align: center;
              text-decoration: none;
              display: inline-block;
              font-size: 16px;
          }
        .label, .title {
            background: #000;
            color: #fff;
            padding: 3px;
            width:300px;
            text-align:center;
        }
        .popup-content {
            background: #fff;
            padding: 3px;
            width:300px;
            height:auto;
        }
        .ol-popup-closer {
            position: absolute;
            top: 2px;
            right: 8px;
        }
        .ol-popup-closer:after {
            content: "x";
            color: #fff;
        }
        .css_animation {
            height: 50px;
            width: 50px;
            border-radius: 25px;
            background: rgba(255, 0, 0, 0.9);
            transform: scale(0);
            animation: myfirst 3s;
            animation-iteration-count: infinite;
        }
    </style>
}

@section bodypart{
    <div class="TopicLabel">历史推演-伤亡蔓延</div>
    <div id="test" class="Map">
        <div id="map" class="map"></div>
    </div>

}


<script>
    window.onload = function ()
    {
        getNum();
    };

    var proType = 'EPSG:4326';
    var querylayers = 'NJ:aqq';
    var querylayers2 = 'NJ:tsd';

    var layer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: "http://localhost:8080/geoserver/NJ/wms",
            preload: Infinity,
            params: {
                'service': 'WMS',
                'version': '1.1.1',
                'request': 'GetMap',
            //    'layers': 'NJ:aqq,NJ:tsd',
                'srs': proType,
            },
            serverType: 'geoserver',
        })
    });

    var view = new ol.View({
        center: [118.8, 32.05],
        projection: proType,
        zoom: 12
    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.Stamen({
                    layer: 'watercolor'
                })
            }),
            new ol.layer.Tile({
                source: new ol.source.Stamen({
                    layer: 'terrain-labels'
                })
            })
        ],
        target: 'map',
        view: view
    })
    map.addLayer(layer);
    console.log(layer);

    function getNum() {
        $.getJSON("/HOME/GetNums", function (data) {
            $.each(data, function (i, item) {
                $('#map').append('<div id="chart' + item.ID + '" class="map" style="height: 180px;width: 30px;"></div>');
                var pt = [item.X, item.Y];
                var test = new ol.Overlay({
                    position: pt,
                    positioning: 'center-center',
                    element: document.getElementById('chart' + item.ID)
                });
                map.addOverlay(test);
                var test = echarts.init(document.getElementById('chart' + item.ID));
                var option = {
                    xAxis: {
                        show: false,
                        type: 'category',
                        data: [item.NUMBER]
                    },
                    yAxis: {
                        show: false,
                        type: 'value',
                        max: 58000,
                        min: 0
                    },
                    series: [{
                        data: [item.NUMBER],
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: "#F7340B"
                            }
                        },
                    }]
                };
                test.setOption(option);
            });
        });
    }
</script>
